<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style type="text/css">
			.box{
				width: 200px;
				height: 200px;
				border: 1px red solid;
				font-size: 32px;/*字体大小*/
				text-align: center;
				/*浮动float:left左浮动，right右浮动，none没有，默认值，不浮动*/
				float: left;
				
			}
			.box2{
				width: 800px;
				height: 210px;
				border: 1px green solid;
			}
			.clear{
				clear: both;
			}
			.bigbox{
				overflow: hidden;/*超出部分隐藏*/
			}
			/*清除浮动的第三种方式：代表企业 网易，淘宝等*/
			.clearfix::after{/*在clearfix类的后面*/
			content: "";/*内容为空*/
			display: block;/*将伪元素转换为块级盒子*/
			height: 0;
			clear: ;/*清除两端浮动*/
			visibility: /*显示状态：隐藏*/;
				
			}
			清除浮动的第四种方法:
			.clearfix::after,.clearfix::before{
				/*  在clearfix 类前后添加*/
				content: "";
				display: table;
			}
			.clearfix::after{
				clear: both;/*清除两端浮动*/
			}
			
		</style>
	</head>
	<body>
		<!--传统网页布局：标准流+浮动+定位-->
		<!--float-->
		<!--快速创建标签：p*3 tab-->
		<!--快速创建类名为：box的盒子：标签 box*个数 tab-->
		<!--
		浮动的特性：
		1.浮动的元素会脱离标准流(脱标)；解决方法：清楚浮动.
		2.浮动的元素——行内显示并且顶部对齐,
		3. 浮动的元素具有行内块类似的特性.
		清除浮动的方法：
		1.额外标签法：隔墙法。即给浮动的盒子添加额外的块级标签，
		并给标签加入clear:both;(清除两端浮动)此法不常用
		2.给父级元素添加overflow:hidden 属性。
		-->
		<!--
		网页布局第一标准：多个块级元素纵向排列标准流。多个块级元素横向排列找浮动。
		标准流+浮动布局策略：父级用标准流排列上下位置，内部子元素用浮动排列左右位置。
		-->
		<div class="bigbox clearfix">
			<div class="box">1</div>
			<div class="box" style="height: 180px;">2</div>
			<div class="box" style="height: 240px;">3</div>
			<!--<div class="clear"></div>-->
		</div>
		<div class="box2"></div>
		
	</body>
</html>
